<template>
  <div class="g-iframe-con">
    <el-button type="primary" @click="push(0)">vue官网</el-button>
    <el-button type="primary" @click="push(1)">vue API</el-button>
    <el-button type="primary" @click="push(2)">vue-cli</el-button>
    <el-button type="primary" @click="push(3)">vuex</el-button>
    <el-button type="primary" @click="push(4)">vue-router</el-button>
    <div class="iframe-wrapper">
      <iframe :src="vueWeb[index]" frameborder="0"></iframe>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        index: 0,
        vueWeb: [
          'https://cn.vuejs.org/v2/guide/index.html',
          'https://cn.vuejs.org/v2/api/',
          'https://cli.vuejs.org/zh/guide/',
          'https://vuex.vuejs.org/zh/',
          'https://router.vuejs.org/zh/'
        ]
      }
    },
    methods: {
      push(index) {
        this.index = index
      }
    }
  }
</script>